11. P5.jsとD3.js

本日の話題

ブラウザ上の簡単なプログラミングで 情報視覚化

P5.js

D3.js

Processing

https://processing.org/ https://gyazo.com/92902dcd7193e28f8cebfaf3c542108b

Ben Fryの開発したお手軽ビジュアリゼーション言語

Javaの面倒なところをなくす

すぐに開発はじめられるようにする

HTML記法採用

#ff1234

簡略記述

Javaの面倒なところ

前提知識が多量

システムの用意が大変

エディタ, コンパイラ, ライブラリ, ...

code:hello.java

public class HelloWorld {

public static void main(String[] args){

System.out.println("Hello World!!");

}

}

Cの場合

code:hello.c

main(){

printf("Hello, World!\n");

}

Ruby

code:hello.rb

puts "Hello, World"

JavaScript

code:hello.js

console.log("Hello, World");

Processing

code:hello.pde

line(0,0,100,100);

Ben Fry

https://Gyazo.com/4b14e7234b823d503091bf4f158af271.png

https://gyazo.com/9c0cb783d3d06476640f117d5e361941

田中孝太郎 , 前川峻志

http://gyazo.com/7b7a39436c6e83ac61d4f5d3f302a990.png

Let's start Processing

by Casey Reas, Ben Fry

http://gyazo.com/1057a6aae7a755267cc43c4141eb6787.png

たいへん分厚い

Processingのコードとアイデアを共有

https://gyazo.com/b6d9ab4384d962de6677f5cb9960e9aa

https://www.openprocessing.org/sketch/423314 https://gyazo.com/0f86aad2c6be7650ad8a4ceea95b5d7f

Processingで作った動画

https://www.youtube.com/watch?v=ZwGpF9hOdSQ

伊藤ガビン、林洋介、宮本拓馬

Processingの入手

Windows, Mac, Linux, Chromebookで動く

線の描画

line(0,0,100,100);

Playボタンで実行

http://gyazo.com/64c3253194bc9688b5dfe08b49ddc756.png

(0, 0)の座標

何故か左上のシステムが多い

1行目は画面のトップだというのが普通だから?

色の利用

描画の前に色を指定

文字の描画

フォント設定

Tools⇒CreateFont

loadFont(); textFont(); text();

http://gyazo.com/9cdffe98a74776c405d3670551e6992e.png

繰り返し処理

...

Same syntax as C, Java

setup() と draw()

http://gyazo.com/27d7717830a6fb80f910b4835aa781d7.png

フレーム

動画表示のために描かれる静止画

テレビの場合1秒に60回静止画が描かれる

映画の場合は24回

マウス座標の取得

http://gyazo.com/c58665ec399f87734b80f764407e6450.png

マウスクリック取得

http://gyazo.com/a1845bc33d5483162db2b79b93efa36b.png

関数/変数リファレンス

http://gyazo.com/03e0b31830653be29ed0f628b7af6d9d.png

Webで公開

HTMLとアプレットが生成される

Webサーバに転送して公開

http://pitecan.com/Puzzle/honeycomb/index.html http://gyazo.com/099c531208467217a89ec228856171a6.png

Processingの問題

Javaの利用

ブラウザ上で動かしにくい

Javaが動かないことが多い

ProcessingのJavaScript版

https://p5js.org/ https://gyazo.com/42aa53c84d93659034f52370ca11e427

P5の例

https://p5js.org/examples/simulate-particle-system.html https://gyazo.com/dc35c16d9d72708a3500035661777339.png

P5本

松田晃一

https://www.amazon.co.jp/dp/4877833811 https://gyazo.com/71090411f34432c059d00eb2438b416e

https://images-na.ssl-images-amazon.com/images/I/61wLQ8X0G-L._SX379_BO1,204,203,200_.jpg

ScrapboxでP5を使う

Scrapbox内にコードを書く

https://masui.github.io/runp5/?code=https://scrapbox.io/api/code/sfc-vis2020/11._P5.jsとD3.js/プログラム名

runp5

GitHubのP5実行環境を用意

JSファイルを指定して実行

https://masui.github.io/runp5/?code=JSのURL

直線を描く

code:line.js

function setup(){

createCanvas(400,400)

line(0,0,300,300)

}

ランダムに点を表示

code:random.js

function setup(){

createCanvas(400,400)

fill('#eee')

strokeWeight(0)

rect(0,0,400,400)

}

function draw(){

fill('blue')

rect(random(400),random(400),2,2)

}

正規分布

https://gyazo.com/edbeca3c66ed7606e6fcc27dbf9b5bc8

code:normal.js

function setup(){

createCanvas(200,200)

histogram = []

strokeWeight(0)

}

function draw(){

val = 0

for(i=0;i<10;i++) val += random(1/10)

fill('#ff0')

rect(0,0,200,200)

fill('blue')

for(i=0;i<100;i++)

}

ドラッグ

https://gyazo.com/0ec9a6ad4dc1f39c260d34439bf827a8

code:drag.js

// MouseDragged

function setup() {

createCanvas(320, 240);

fill(0);

}

function mouseDragged(){

ellipse(mouseX, mouseY, 20, 20);

}

Follow

code:follow.js

segLength = 50;

function setup() {

createCanvas(710, 400);

strokeWeight(20.0);

stroke(255, 100);

}

function draw() {

background(0);

dragSegment(0, mouseX, mouseY);

}

function dragSegment(i, xin, yin) {

var angle = atan2(dy, dx);

}

function segment(x, y, a) {

push();

translate(x, y);

rotate(a);

line(0, 0, segLength, 0);

pop();

}

エスカレータ

code:escalator.js

STRATEGY1 = 0; // 左優先

STRATEGY2 = 1; // 右優先

lspeedfactor = 1.0;

lgapfactor = 1.0;

rspeedfactor = 2.0;

rgapfactor = 3.0;

strategy = STRATEGY2;

var pair = location.search.substring(1).split('&');

}

MOVING_LOWER = 0;

WAITING_LOWER = 1;

ASCENDING = 2;

UPPER = 3;

LEFT = 0;

RIGHT = 1;

llane = 220.0;

rlane = 250.0;

escheight = 460.0;

WINWIDTH = 500;

WINHEIGHT = 500;

NPERSONS = 50;

NSTAIRS = 15;

STAIRHEIGHT = 60;

STEPUNIT = 1;

steppos = 0;

waiting_l = 0;

waiting_r = 0;

done = false;

xspeed = 1.0;

persons = [];;

loops = 0;

var Person = function(){

this.x = 0.0;

this.y = 0.0;

this.status = MOVING_LOWER;

this.lr = LEFT;

};

function setup(){

createCanvas(WINWIDTH,WINHEIGHT);

frameRate(60);

for(var i=0;i<NPERSONS;i++){

}

}

function can_ascend_l(n){

var result = true;

for(var i=0;i<n;i++){

return false;

}

}

return true;

}

function can_ascend_r(n){

for(var i=0;i<n;i++){

return false;

}

}

return true;

}

function can_forward_lower(n){

for(var i=0;i<n;i++){

return false;

}

}

return true;

}

function can_forward_upper(n){

for(var i=0;i<NPERSONS;i++){

return false;

}

}

return true;

}

function all_upper(){

for(var i=0;i<NPERSONS;i++){

}

return true;

}

function draw(){

if(done) return;

background(213,200,255);

for(var i=0;i<NSTAIRS;i++){

y = i * STAIRHEIGHT + steppos;

//line(llane-10+10,WINHEIGHT-y,rlane+10+20+10,WINHEIGHT-y);

fill(200,200,200);

strokeWeight(0);

rect(llane-10+10,WINHEIGHT-y,rlane-llane+40,STAIRHEIGHT/2);

}

steppos += STEPUNIT;

if(steppos >= STAIRHEIGHT){

steppos = 0;

}

for(var i=0;i<NPERSONS;i++){ // 駒をひとつずつ進める。

case MOVING_LOWER: // 下で移動中

if(strategy == STRATEGY1){

if(waiting_l == 0 || waiting_l < waiting_r){

waiting_l++;

}

else {

}

}

else if(strategy == STRATEGY2){

if(waiting_l < waiting_r){

waiting_l++;

}

else {

}

}

}

waiting_r++;

}

if(can_forward_lower(i)){ // 前に進める場合は一歩前に移動する

}

break;

case UPPER: // エスカレータからおりていて

if(can_forward_upper(i)){ // 前に進める場合は一歩前に移動する

}

break;

case WAITING_LOWER: // エスカレータ待ち状態で、

can_ascend_l(i) // 上に余地がある

){

waiting_l--;

}

can_ascend_r(i) // 上に余地がある

){

waiting_r--;

}

break;

case ASCENDING: //エスカレータに乗っていたら

}

else {

}

else {

}

}

break;

}

}

strokeWeight(1);

for(var i=NPERSONS-1;i>=0;i--){

fill(255,255,0);

fill(0,0,0);

}

if(! all_upper()){

loops++;

}

else {

done = true;

}

fill(0,0,0);

// text(millis(),20,20);

text(loops,20,20);

}

Example: Yuki-san

https://gyazo.com/86adfa800b4f9976fdfe65613c54593c

code:yuki.js

T=0

function setup(){

createCanvas(600,600)

noStroke()

}

function draw() {

fill('#000')

rect(0,0,600,600);

N=100

S=300

for (n=1; n<N; n++) {

r=n*2

fill('#fff')

R=(N-n)/10

t=T*n

ellipse(S+r*cos(t),S-r*sin(t),R,R)

T+=0.00001

console.log(T)

}

}

EXPO2025

https://gyazo.com/0410138451c15db9e410aae7d0ce9da1

code:osaka.js

const spots = []

function newSpot(deg, r) {

return {

deg,

dx: random(-10, 10),

dy: random(-10, 10),

r,

r2: r*random(0.5,1.5),

vx: random(-20, 20) / 10,

vy: random(-20, 20) / 10,

}

}

function setup() {

createCanvas(640, 640);

colorMode(RGB)

angleMode(DEGREES)

noStroke()

for (i = 0; i < 360;) {

const r = random(30, 150)

spots.push(newSpot(i, r))

i += r / 4

}

}

function move(spot) {

spot.vx = random(-40, 40) / 10 - spot.dx / 2

spot.vy = random(-40, 40) / 10 - spot.dy / 2

spot.dx += spot.vx

spot.dy += spot.vy

spot.deg += .3

}

function origin(spot) {

return {

ox: width / 2 + cos(spot.deg) * width / 3,

oy: height / 2 + sin(spot.deg) * height / 3,

}

}

function drawSpot(spot) {

fill(color(255, 0, 0))

const {

ox,

oy

} = origin(spot)

ellipse(ox + spot.dx, oy + spot.dy, spot.r,spot.r2);

}

function drawEye(spot) {

const {

ox,

oy

} = origin(spot)

const {

r

} = spot

const dx = norm(mouseX - ox, 0, width) * r

const dy = norm(mouseY - oy, 0, height) * r

fill('white')

ellipse(ox + dx / 3, oy + dy / 3, r / 2);

fill('black')

ellipse(ox + dx / 2, oy + dy / 2, r / 4);

}

function draw() {

background(0)

spots.forEach(spot => {

drawSpot(spot)

move(spot)

});

})

}

unicodeアート

https://twitter.com/nagayama/status/1320916731603210240 https://gyazo.com/ad1538c2a9ff8e44546d5c711fb6e143

@nagayama氏の作品

code:unicode.js

t=0//#つぶやきProcessing

draw=_=>{createCanvas(W=600,W)

t++

textAlign(CENTER, CENTER)

textSize(25)

for(y=0;y<30;y++)for(x=0;x<30;x++)text(String.fromCodePoint(9632+int(noise(x/20,y/20,t/200)*30)),x*20+10,y*20+10)}

つぶやきProcessing

Twitter

JavaScriptの情報視覚化システム

お絵描きライブラリとしても利用可能

SVGのDOMをビジュアライズ

SVG要素に値を関連づける

値をSVGの属性に反映させることにより再描画が行なわれる

Mike Bostock氏が開発

New York Timesで利用

2010からD3を作成/配付

http://gyazo.com/de8d809e2d27f77f76300a6d854fb322.png

Mike Bostock氏

http://gyazo.com/f72348e5c77e7e3f484b6537137d4c1e.png

Treemap, Sunburst, etc.

https://gyazo.com/0ce5bf9f70ca6f12d3946ef661ca30e2

Visualization of Scrapbox links

https://gyazo.com/750fcfca435be7c85e384ea47a7d9723

http://gyazo.com/78195b75ea63a1f901f4986d35e40be8.png

http://gyazo.com/8abce282d17e4875f6f389b4cf2abd91.png

http://gyazo.com/105523c43eea6892fba4a76694f5a5bc.png

D3.js references

https://gyazo.com/a3535d8eb76508fc60f8ab3e43092a21 https://shimz.me/blog/d3-js/5022

Video: Design is a search problem

https://www.youtube.com/watch?v=fThhbt23SGM

SDraw

Use D3.js for drawing

https://gyazo.com/6ab47e029ae216659a006578a433c065 http://www.pitecan.com/SDraw/sdraw.html

https://gyazo.com/4fd22526469208fb49d280edbc724f0a

SVG (Scalable Vector Graphics)

ベクトル型式の描画システム

かなり昔からの標準化仕様

グラフィクスを宣言的に記述

ほとんどのブラウザで実装されている

宣言的記述 vs 手続き的記述

宣言的記述

e.g. Excel

実行順は不明

手続き的記述

e.g. 普通のプログラミング言語

〜を〜する

矩形描画

code:rect.svg

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

<svg width="320pt" height="223pt" viewBox="0 0 100 70"

<rect x="5" y="5" width="70" height="40" fill="red"/>

<rect x="15" y="15" width="70" height="40" fill="orange"/>

<rect x="25" y="25" width="70" height="40" fill="yellow"/>

</svg>

描画結果

http://gyazo.com/3ac4f9f16144b0fea50f9a67c322969e.png

線分描画

code:line.svg

<path d="M 100 100 L 300 100 L 200 300 z" fill="none" stroke="blue" stroke-width="3" />

<path d="M36,203L184,203L184,79L36,79" fill="none" stroke="red" stroke-width="3" />

</svg>

描画結果

http://gyazo.com/33d63493ee5dc57628610aa9e00a8e91.png

一般的な描画システムとの違い

一般的な描画システム:

Canvas, OpenGL, X11, Quartz (Mac), PostScript, ...

指示通り順番に描画を行なっていく

線分を描く

矩形を描く

画面をクリヤ

SVGの利点

HTMLと融合させられる

SVG中にAタグなどを記述可能

Scrapbox上のD3プログラムを動かす

GitHubのD3実行環境

JSファイルを指定して実行

https://masui.github.io/rund3/?code=JSのURL

円グラフ

https://gyazo.com/18726f8b9d236749c38504e131def940

code:d3sample1.js

var canvas = d3.select("body")

.append("svg")

.attr("width", 500)

.attr("height", 500);

var g = canvas.append("g")

.attr("transform", "translate(300, 300)");

//var arc = d3.svg.arc()

var arc = d3.arc()

.innerRadius(130)

.outerRadius(200);

var pie = d3.pie()

.value(function(d) { return d; });

var arcs = g.selectAll(".arc")

.data(pie(data))

.enter()

.append("g")

.attr("class", "arc");

var color = d3.scaleOrdinal()

arcs.append("path")

.attr("d", arc)

.attr("fill", function (d) { return color(d.data); });

arcs.append("text")

.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })

.attr("text-anchor", "middle")

.attr("text-size", "10px")

.text(function(d) { return d.data; });

棒グラフ

code:graph.js

// 1. データの準備

var dataset = [

{ "name": "A", "value": 5 },

{ "name": "B", "value": 6 },

{ "name": "C", "value": 8 },

{ "name": "D", "value": 1 },

{ "name": "E", "value": 2 },

{ "name": "F", "value": 6 },

{ "name": "G", "value": 8 },

{ "name": "H", "value": 6 },

{ "name": "I", "value": 10 },

{ "name": "J", "value": 9 }

]

var width = 400; // グラフの幅

var height = 300; // グラフの高さ

var padding = 30; // スケール表示用マージン

// 2. SVG領域の設定

var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);

// 3. 軸スケールの設定

var xScale = d3.scaleBand()

.padding(0.1)

.domain(dataset.map(function(d) { return d.name; }));

var yScale = d3.scaleLinear()

// 4. 軸の表示

svg.append("g")

.attr("transform", "translate(" + 0 + "," + (height - padding) + ")")

.call(d3.axisBottom(xScale));

svg.append("g")

.attr("transform", "translate(" + padding + "," + 0 + ")")

.call(d3.axisLeft(yScale));

// 5. バーの表示

svg.append("g")

.selectAll("rect")

.data(dataset)

.enter()

.append("rect")

.attr("x", function(d) { return xScale(d.name); })

.attr("y", function(d) { return yScale(d.value); })

.attr("width", xScale.bandwidth())

.attr("height", function(d) { return height - padding - yScale(d.value); })

.attr("fill", "steelblue");

丸

https://gyazo.com/4e3437b060a422db4c9714414912a652

code:circles.js

var svg = d3.select("body").append("svg").attr("width", 500).attr("height", 100);

var circles = svg.selectAll("circle")

.data(dataset)

.enter()

.append("circle");

circles.attr("cx", function(d, i) {

return (i * 50) + 25;

})

.attr("cy", 50)

.attr("r", function(d) {

return 5*d;

})

.attr("fill", "yellow")

.attr("stroke", "orange")

.attr("stroke-width", function(d) {

return d;

});

点プロット

https://gyazo.com/faadffbc4cbc90730a03ae98b59973ef

code:scatter.js

var svg = d3.select("body").append("svg").attr("width", 500).attr("height", 100);

var dataset =

svg.selectAll("circle")

.data(dataset)

.enter()

.append("circle")

.attr("r", 4);

Treemap

code:treemap.js

// 1. 描画用のデータ準備

var width = 800;

var height = 600;

var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);

var data = {

"name": "A",

"children": [

{ "name": "B", "value": 25 },

{

"name": "C",

"children": [

{ "name": "D", "value": 10 },

{ "name": "E", "value": 15 },

{ "name": "F", "value": 10 }

]

},

{ "name": "G", "value": 15 },

{

"name": "H",

"children": [

{ "name": "I", "value": 20 },

{ "name": "J", "value": 10 }

]

},

{ "name": "K", "value": 10 }

]

};

// 2. 描画用のデータ変換

root = d3.hierarchy(data);

root

.sum(function(d) { return d.value; })

.sort(function(a, b) { return b.height - a.height || b.value - a.value; });

var treemap = d3.treemap()

.padding(1)

.round(true);

treemap(root);

// 3. svg要素の配置

var g = d3.select("svg")

.selectAll(".node")

.data(root.leaves())

.enter()

.append("g")

.attr("class", "node")

.attr("transform", function(d) { return "translate(" + d.x0 + "," + (d.y0) + ")"; });

g.append("rect")

.style("width", function(d) { return d.x1 - d.x0; })

.style("height", function(d) { return d.y1 - d.y0; })

.style("fill", function(d) {

while(d.depth > 1) d = d.parent;

})

.style("opacity", 0.6)

g.append("text")

.attr("text-anchor", "start")

.attr("x", 5)

.attr("dy", 30)

.attr("font-size", "150%")

.attr("class", "node-label")

.text(function(d) { return d.data.name + " : " + d.value; });

棒グラフ

https://gyazo.com/fe5e995c565e222df21ab5f5bd84c73b

CSSも指定が必要

code:bar.css

div.bar {

display: inline-block;

width: 20px;

height: 75px;

background-color: teal;

}

code:bar.js

d3.select("body")

.selectAll("div")

.data(dataset)

.enter()

.append("div")

.attr("class", "bar")

.style("height", function(d) {

var barHeight = d * 5; // 高さを 5 倍にします

return barHeight + "px";

});